<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - {{ config.site_title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <style>
        .admin-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .admin-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
        }
        
        .admin-header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .admin-logo {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .admin-logo-icon {
            font-size: 2rem;
            color: white;
        }
        
        .admin-logo-text {
            font-size: 1.5rem;
            font-weight: 700;
        }
        
        .admin-nav {
            display: flex;
            gap: 1rem;
        }
        
        .admin-btn {
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            text-decoration: none;
            border: none;
            font-size: 1rem;
        }
        
        .admin-btn-primary {
            background-color: white;
            color: var(--primary);
        }
        
        .admin-btn-primary:hover {
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        .admin-btn-outline {
            background-color: transparent;
            border: 2px solid white;
            color: white;
        }
        
        .admin-btn-outline:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .config-panel {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--box-shadow);
            margin-bottom: 2rem;
        }
        
        .panel-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .file-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1.5rem;
        }
        
        .file-table th, .file-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .file-table th {
            background-color: var(--light-gray);
            font-weight: 600;
        }
        
        .file-table tr:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.875rem;
            font-weight: 600;
        }
        
        .status-active {
            background-color: rgba(6, 214, 160, 0.2);
            color: #06d6a0;
        }
        
        .status-expired {
            background-color: rgba(239, 71, 111, 0.2);
            color: #ef476f;
        }
        
        .action-btn {
            padding: 0.25rem 0.75rem;
            border-radius: var(--border-radius);
            font-size: 0.875rem;
            cursor: pointer;
        }
        
        .action-btn-danger {
            background-color: rgba(239, 71, 111, 0.1);
            color: #ef476f;
            border: none;
        }
        
        .action-btn-danger:hover {
            background-color: rgba(239, 71, 111, 0.2);
        }
    </style>
</head>
<body>
    <div class="admin-header">
        <div class="container">
            <div class="admin-header-content">
                <div class="admin-logo">
                    <i class="fas fa-cog admin-logo-icon"></i>
                    <div class="admin-logo-text">{{ config.site_title }} 管理面板</div>
                </div>
                <div class="admin-nav">
                    <a href="/" class="admin-btn admin-btn-outline">
                        <i class="fas fa-home"></i> 返回首页
                    </a>
                    <a href="/admin/logout" class="admin-btn admin-btn-outline">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="admin-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">
                        <i class="fas fa-{{ 'check-circle' if category == 'success' else 'exclamation-triangle' }} alert-icon"></i>
                        <div>{{ message }}</div>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <!-- 系统配置 -->
        <div class="config-panel">
            <h2 class="panel-title"><i class="fas fa-cog"></i> 系统设置</h2>
            
            <form action="/admin/update_config" method="post">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="site_title">网站标题</label>
                        <input type="text" class="form-control" id="site_title" name="site_title" value="{{ config.site_title }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="primary_color">主题颜色</label>
                        <input type="color" class="form-control" id="primary_color" name="primary_color" value="{{ config.primary_color }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="logo_url">LOGO地址</label>
                        <input type="text" class="form-control" id="logo_url" name="logo_url" value="{{ config.logo_url }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="default_expire_days">默认有效期(天)</label>
                        <input type="number" class="form-control" id="default_expire_days" name="default_expire_days" value="{{ config.default_expire_days }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="max_upload_size">最大上传大小(MB)</label>
                        <input type="number" class="form-control" id="max_upload_size" name="max_upload_size" value="{{ config.max_upload_size // (1024 * 1024) }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="allowed_extensions">允许的文件扩展名</label>
                        <input type="text" class="form-control" id="allowed_extensions" name="allowed_extensions" value="{{ config.allowed_extensions }}">
                        <small class="text-muted">多个扩展名请用逗号分隔</small>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="allow_guest_uploads" name="allow_guest_uploads" {{ 'checked' if config.allow_guest_uploads }}>
                            <label class="form-check-label" for="allow_guest_uploads">
                                允许访客上传文件
                            </label>
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> 保存设置
                </button>
            </form>
        </div>
        
        <!-- 修改密码 -->
        <div class="config-panel">
            <h2 class="panel-title"><i class="fas fa-key"></i> 修改密码</h2>
            
            <form action="/admin/change_password" method="post">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="current_password">当前密码</label>
                        <input type="password" class="form-control" id="current_password" name="current_password" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="new_password">新密码</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="confirm_password">确认新密码</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-key"></i> 修改密码
                </button>
            </form>
        </div>
        
        <!-- 文件管理 -->
        <div class="config-panel">
            <h2 class="panel-title"><i class="fas fa-file"></i> 文件管理</h2>
            
            <table class="file-table">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>提取码</th>
                        <th>大小</th>
                        <th>下载</th>
                        <th>状态</th>
                        <th>上传时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for file in files %}
                    <tr>
                        <td>{{ file.filename }}</td>
                        <td>{{ file.access_code }}</td>
                        <td>{{ (file.file_size/1024)|round(2) if file.file_size < 1024 * 1024 else (file.file_size/(1024 * 1024))|round(2) }} {{ 'KB' if file.file_size < 1024 * 1024 else 'MB' }}</td>
                        <td>{{ file.download_count }} / {{ file.max_downloads }}</td>
                        <td>
                            {% if file.expire_time > datetime.utcnow() %}
                                <span class="status-badge status-active">有效</span>
                            {% else %}
                                <span class="status-badge status-expired">过期</span>
                            {% endif %}
                        </td>
                        <td>{{ file.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            <form action="/admin/delete/{{ file.id }}" method="post" style="display:inline;">
                                <button type="submit" class="action-btn action-btn-danger" onclick="return confirm('确定要删除此文件吗？该操作不可恢复！')">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>